<template>
  <div class="projectNote">
    <el-row>
      <el-col :span="24"
              id="headBox">
        <el-col :span="4">
          <el-button type="primary"
                     icon="el-icon-plus"
                     class="float-left"
                     @click="onAddDialog">添加</el-button>
        </el-col>
        <el-col :span="10">
          &nbsp;
        </el-col>
        <el-col :span="10"
                id="headInputName">
          <el-col :span="20"
                  id="headNameTop">
            <el-input placeholder="请输入姓名"
                      v-model="name"
                      class="float-right"
                      @keyup.enter.native="onSearch"></el-input>
          </el-col>
          <el-col :span="4">
            <el-button type="primary"
                       style="width:100%!important;"
                       class="float-right"
                       @click="onSearch">查询</el-button>
          </el-col>

        </el-col>

      </el-col>
      <el-col :span="24">
        <div class="name">项目名称：<span style="color:#666">{{projectName}}</span></div>
      </el-col>
      <el-col :span="24"
              style="margin-top:20px;">
        <el-table :data="tableData"
                  height="700"
                  border
                  :header-cell-style="{background:'#f5f5f5'}">
          <el-table-column label="序号"
                           align="center">
            <template slot-scope="scope">
              <span>{{ scope.$index+(page - 1)*10 + 1}}</span>
            </template>
          </el-table-column>
          <el-table-column label="姓名"
                           align="center"
                           show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ scope.row.user_name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="岗位"
                           align="center"
                           show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ scope.row.job_name}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="sms_total"
                           label="短信数量"
                           align="center"
                           show-overflow-tooltip>

          </el-table-column>
          <el-table-column label="操作"
                           width="185px"
                           align="center"
                           show-overflow-tooltip>
            <template slot-scope="scope">
              <el-button size="mini"
                         type="warning"
                         icon="el-icon-setting"
                         @click="cfgNote(scope.row)">
              </el-button>
              <el-button size="mini"
                         type="danger"
                         icon="el-icon-delete"
                         @click="deleteNote(scope.row)"></el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="24"
              id="footerBox">
        <el-pagination @current-change="handleCurrentChange"
                       :current-page="page"
                       :page-size="pageSize"
                       @size-change="handleSizeChange"
                       :page-sizes="[10,20,30,40,50,100]"
                       layout="total,  sizes,prev, pager, next, jumper"
                       :total="pageTotal">
        </el-pagination>
      </el-col>
    </el-row>

    <el-dialog title="添加"
               :visible.sync="addVisible"
               :before-close="handleClose"
               width="800px">
      <AddDialog :todos="todos"
                 :catchBack="catchBack"
                 :catchSave="catchSave"></AddDialog>
    </el-dialog>
  </div>
</template>
<script>
import AddDialog from './components/addDialog';
import { organizationApi } from '@/services/CompanySetting';
import { noteSettingApi } from "@/services/SystemSetting";
import { openApi } from "@/services/SystemSetting";
export default {
  components: {
    AddDialog
  },
  data () {
    return {
      todos: 0,
      pageSize: 10,
      rightMrArr: [],
      rightMrArrList: [],
      rightDataArr: [],
      selectedArr: [],
      selectOrgNo: '',
      org_no: '',
      tableData: [],
      pageTotal: 0,
      page: 1,
      name: '',
      projectName: this.$route.query.project_name,
      addVisible: false,
      // treeData: [],
      // defaultProps: {
      //   children: 'children_list',
      //   label: 'name'
      // },
      // value: [],
      // selectData: '',
      // transferData: [],
      // sureData: [],
      // compId: '',
      // newAddArr: [],//新选中的数组
    }
  },
  methods: {
    //添加弹框关闭前执行的事件
    handleClose (done) {
      this.todos = 0;
      this.addVisible = false;
      done()
    },
    //返回
    catchBack (val) {
      if (val == 'SUCCESS') {
        this.todos = 0;
        this.addVisible = false;
      }
    },
    //保存
    catchSave (val) {
      if (val == 'SUCCESS') {
        this.todos = 0;
        this.page = 1;
        this.getProNoteData();
        this.addVisible = false;
      }
    },
    //查询
    onSearch () {
      this.page = 1;
      this.getProNoteData();
    },
    //添加-点击事件
    onAddDialog () {
      this.todos = 1;
      this.addVisible = true;
      //this.handleNodeClick(this.treeData[0]);
    },
    // onTransferChange (val) {
    //   this.selectedArr = [];
    //   //左边空梭到右边后,对应的数组对象重命名
    //   if (this.value.length != 0 && this.value[0] != "") {
    //     for (var i = 0; i < this.value.length; i++) {
    //       for (var j = 0; j < this.transferData.length; j++) {
    //         if (this.value[i] == this.transferData[j].key) {
    //           this.selectedArr.push({
    //             admin_id: this.transferData[j].key,
    //             user_name: this.transferData[j].label,
    //             is_delete: 1,
    //             company_id: '',
    //             created_at: '',
    //             project_id: '',
    //             sms_admin_id: '',
    //             updated_at: ''
    //           });
    //         }
    //       }
    //     }
    //   } else {
    //     //不满足条件的右边的则为空
    //     this.value = [];
    //     this.selectedArr = [];
    //   }
    //   //右边已有的列表数据值还原；
    //   for (var i = 0; i < this.rightMrArrList.length; i++) {
    //     for (var j = 0; j < this.selectedArr.length; j++) {
    //       if (this.rightMrArrList[i].admin_id == this.selectedArr[j].admin_id) {
    //         this.selectedArr[j] = this.rightMrArrList[i]
    //       }
    //     }
    //   }
    // },
    //获取项目短信数据
    getProNoteData () {
      noteSettingApi.getProjectIndex({
        params: {
          user_name: this.name,
          project_id: this.$route.query.project_id,
          page: this.page,
          per_page: this.pageSize
        }
      }).then((res) => {
        this.tableData = res.data.data;
        this.pageTotal = res.data.total;
      }).catch((error) => {
        console.log(error)
      })
    },
    // 配置短信
    cfgNote (row) {
      this.$router.push({ path: 'noteModelCfg', query: { sms_admin_id: row.sms_admin_id } })
    },
    // 删除短信
    deleteNote (row) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        noteSettingApi.delProkectUerSms({
          data: {
            id: row.sms_admin_id
          }
        }).then((res) => {
          if (res.code == 0) {
            this.$message.success('删除成功');
            this.getProNoteData();
          }
        }).catch((error) => {
          console.log(error)
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除!'
        });
      });

    },
    //穿梭框数据
    // getTransferData () {
    //   var leftData = '';
    //   var rightData = '';
    //   this.transferData = [];
    //   openApi.getProjectSmsUser({
    //     data: {
    //       is_page: 0
    //     }
    //   }).then((res) => {
    //     console.log('空梭框数据=', res)
    //     //leftData = res.data.left;
    //     // rightData = res.data.right;
    //     for (let i = 0; i < res.data.list.length; i++) {
    //       this.transferData.push({
    //         key: res.data.list[i].user_id,
    //         label: res.data.list[i].user_name
    //       });
    //     }
    //     // for (let i = 0; i < rightData.length; i++) {
    //     //   this.sureData.push((rightData[i].admin_id).toString())
    //     //   this.value.push((rightData[i].admin_id));
    //     // }
    //   }).catch((error) => {
    //     console.log(error)
    //   })
    // },
    getTreeData () {
      noteSettingApi.getCompanyTree({
        data: {

        }
      }).then((res) => {
        this.treeData = res.data.treeList;
      }).catch((error) => {
        console.log(error)
      });
    },
    // selectTransferData (data) {
    //   this.selectData = data.join(',')//保存时判断is_delete是否为0：未选中；1：已选中
    //   this.arr = this.selectData.split(',');
    //   //console.log('最初arr=', this.arr)
    // },
    // //选择单位
    // handleNodeClick (data) {
    //   this.selectOrgNo = data.org_no;
    //   this.company_id = data.company_id;
    //   this.selectData = '';
    //   this.value = [];//右边的数据清空
    //   this.sureData = [];//右边已有的值
    //   this.selectedArr = [];//右边数组对象
    //   //console.log('右边的数据=', this.value);
    //   //短信配置->添加->获取本单位下列表
    //   this.getUnitList();
    //   //已选中的人员
    //   this.getSelectedList();
    // },
    // //短信配置->添加->获取本单位下列表---->左边的列表数据
    // getUnitList () {
    //   //console.log('左边company_id', this.company_id)
    //   openApi.getUnitListData({
    //     data: {
    //       org_no: parseInt(this.selectOrgNo),//正确的
    //       is_page: 0,
    //       company_id: parseInt(this.company_id)//单位的id
    //     }
    //   }).then((res) => {
    //     this.transferData = [];
    //     for (let i = 0; i < res.data.list.length; i++) {
    //       this.transferData.push({
    //         key: res.data.list[i].user_id,
    //         label: res.data.list[i].user_name
    //       });
    //     }
    //   }).catch((error) => {
    //     console.log(error)
    //   });
    // },
    // //已选中的人员---->右边的列表数据
    // getSelectedList () {
    //   //已选人员列表
    //   noteSettingApi.getPersonList({
    //     params: {
    //       //company_id: this.selectOrgNo,
    //       company_id: this.company_id,
    //       org_no: this.selectOrgNo
    //     }
    //   }).then((res) => {
    //     //获取右边的数组数据
    //     this.rightDataArr = []
    //     this.sureData = [];
    //     this.value = [];
    //     //this.selectedArr = res.data;
    //     res.data.forEach(ele => {
    //       this.selectedArr.push(ele)
    //     })
    //     for (let j = 0; j < res.data.length; j++) {
    //       this.rightDataArr.push({
    //         key: res.data[j].admin_id,
    //         label: res.data[j].user_name
    //       });
    //     }

    //     for (let i = 0; i < this.selectedArr.length; i++) {
    //       //右边选中的
    //       if (this.selectedArr[i].is_delete == 2) {
    //         this.sureData.push((this.selectedArr[i].admin_id).toString());
    //       }
    //       //右边有的
    //       this.value.push((this.selectedArr[i].admin_id).toString());
    //     }
    //     //获取原始右边有值的列表id
    //     this.rightMrArr = this.value;
    //     //获取原始右边有值的列表数据；
    //     this.rightMrArrList = this.selectedArr;
    //   }).catch((error) => {
    //     console.log(error)
    //   })
    // },
    // //保存选中人员
    // savePerson () {
    //   //判断右边是否有选中
    //   if (this.value.length == 0 || this.value[0] == "") {
    //     this.$message.warning('请选择人员')
    //   } else {
    //     //console.log('this.arr=', this.arr)
    //     //保存前判断右边是否有选中
    //     if ((this.arr.length == 1 && this.arr[0] == "") || this.arr.length == 0) {
    //       //右边------没选中的设置为1
    //       this.selectedArr.map(item => {
    //         item.is_delete = 1;
    //       })
    //     } else {
    //       //右边------被选中的设置为2
    //       this.selectedArr.map(item => {
    //         if (this.arr.includes((item.admin_id).toString()) == true) {
    //           item.is_delete = 2;
    //         }
    //       });
    //       //右边------没选中的设置为1
    //       this.selectedArr.map(item => {
    //         if (this.arr.includes((item.admin_id).toString()) != true) {
    //           item.is_delete = 1;
    //         }
    //       })
    //     }

    //     noteSettingApi.setProjectUserChange({
    //       data: {
    //         // admin_ids: this.selectData
    //         user_list: JSON.stringify(this.selectedArr),
    //         project_id: this.$route.query.project_id,
    //         company_id: this.company_id,
    //         org_no: this.selectOrgNo
    //       }
    //     }).then((res) => {
    //       if (res.code == 0) {
    //         this.$message.success('添加成功');
    //         this.page = 1;
    //         this.getProNoteData();
    //         this.selectData = '';
    //         this.addVisible = false;
    //       }
    //     }).catch((error) => {
    //       console.log(error)
    //     })
    //   }
    // },
    // 分页
    handleCurrentChange (page) {
      this.page = page;
      this.getProNoteData();
    },
    //每页显示的条数
    handleSizeChange (val) {
      this.page = 1;
      this.pageSize = val;
      this.getProNoteData();
    },
    //组织管理
    getOrganization () {
      organizationApi.getOrgTree({
        data: {
          node_no: this.org_no,
          node_type: 1
        }
      }).then(res => {
        this.treeData = res.data;
        if (this.treeData.length != 0) {
          this.handleNodeClick(this.treeData[0])
        }
      })
    }
  },
  mounted () {
    //获取空梭框数据
    //this.getTransferData();

    // //短信配置->添加->获取本单位下列表
    // this.getUnitList();
    // //已选中的人员
    // this.getSelectedList();

  },
  created () {
    this.getProNoteData();
    // this.org_no = JSON.parse(window.localStorage.userInfo).org_no;
    // //判断id是否为空
    // if (this.org_no != undefined) {
    //   //获取组织树
    //   this.getOrganization()
    // }
  }
}
</script>
<style lang="scss" scoped>
#footerBox {
  padding: 20px 0;
  text-align: center;
}
#headNameTop {
  padding-right: 12px;
}
#headInputName {
  text-align: right;
}
#headBox {
  margin-bottom: 10px;
}
.projectNote {
  padding: 20px;

  .name {
    margin-left: 5px;
    margin-top: 10px;
  }
}
</style>